<template>
    <div class="preview-image-container">
      <el-image 
        :src="imageUrl" 
        :fit="fit" 
        :preview-src-list="[imageUrl]" 
        @click.native="showPreview"
      />
      <el-dialog v-model:visible="dialogVisible" width="80%">
        <img class="preview-image" :src="imageUrl">
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { defineComponent, reactive } from 'vue';
  
  export default defineComponent({
    name: 'PreviewImage',
    props: {
      imageUrl: { type: String, required: true },
      fit: { type: String, default: 'cover' }
    },
    setup(props) {
      const state = reactive({
        dialogVisible: false
      });
  
      function showPreview() {
        state.dialogVisible = true;
      }
  
      return {
        ...state,
        showPreview
      };
    }
  });
  </script>
  
  <style scoped>
  .preview-image-container {
    position: relative;
    display: inline-block;
    margin-right: 10px; /* 根据需要调整间距 */
  }
  
  .preview-image {
    max-width: 100%;
    max-height: calc(100vh - 20%);
    margin: auto;
  }
  </style>